<style type="text/css">
    table td.arabic {
        font-family: myFirstFont;
        text-align: right;
        font-size: 25px;
        letter-spacing: 1px;
        word-spacing: 3px;
        line-height:40px;
    }
    
    table td.indonesia {
        line-height:40px;
    }
    
    table td.nomor {
        text-align: center;
        weight: 10%;
        line-height:40px;
    }
    
    table td.jumlah-ayat {
        text-align: right;
        weight: 30%;
        padding-right: 15%;
        line-height:40px;
    }
    
    #daftar-surat .daftar-surat-satu {
        display: inline-block;
        width: 45%;
    }
    #daftar-surat .daftar-surat-dua {
        display: inline-block;
        margin-left: 9%;
        width: 45%;
    }
</style>

<div class="row">
    <div class="col-lg-12">
        <h1 class="page-header">AL QUR'AN</h1>
    </div>
</div>

<table class="table table-striped">
            <thead>
                <tr>
                    <th class="head-table">No</th>
                    <th class="head-table" colspan="2">Surat</th>
                    <th class="head-table">Jumlah Ayat</th>
                </tr>
            </thead>
            <tbody>
            <?php
            $sql = "SELECT * FROM sura";
            $no  = 1;
            foreach ($pdo->query($sql) as $row) :
            ?>
                <tr>
                    <td class="nomor"><?php echo $no; ?></td>
                    <td class="arabic" style="border-right:none;">
                        <a href="?menu=quran-content&sura=<?php echo $row['index'] ?>">
                            <?php echo $row['name_arabic']; ?>
                        </a>
                    </td>
                    <td class="indonesia" style="border-left:none;">
                        <a href="?menu=quran-content&sura=<?php echo $row['index'] ?>">
                            <?php echo $row['name_indonesia']; ?>
                        </a>
                    </td>
                    <td class="jumlah-ayat"><?php echo $row['ayas']; ?></td>
                </tr>
            <?php
                $no++;
            endforeach;
            ?>
            </tbody>
        </table>

<!--
<div id ="daftar-surat">
    <span class="daftar-surat-satu">
        <table class="table table-striped">
            <thead>
                <tr>
                    <th class="head-table">No</th>
                    <th class="head-table" colspan="2">Surat</th>
                    <th class="head-table">Jumlah Ayat</th>
                </tr>
            </thead>
            <tbody>
            <?php
            $sql = "SELECT * FROM sura LIMIT 0, 57";
            $no  = 1;
            foreach ($pdo->query($sql) as $row) :
            ?>
                <tr>
                    <td class="nomor"><?php echo $no; ?></td>
                    <td class="arabic">
                        <a href="?menu=quran-content&sura=<?php echo $row['index'] ?>">
                            <?php echo $row['name_arabic']; ?>
                        </a>
                    </td>
                    <td class="indonesia">
                        <a href="?menu=quran-content&sura=<?php echo $row['index'] ?>">
                            <?php echo $row['name_indonesia']; ?>
                        </a>
                    </td>
                    <td class="jumlah-ayat"><?php echo $row['ayas']; ?></td>
                </tr>
            <?php
                $no++;
            endforeach;
            ?>
            </tbody>
        </table>
    </span>
    <span class="daftar-surat-dua">
        <table class="table table-striped">
            <thead>
                <tr>
                    <th class="head-table">No</th>
                    <th class="head-table" colspan="2">Surat</th>
                    <th class="head-table">Jumlah Ayat</th>
                </tr>
            </thead>
            <tbody>
            <?php
            $sql = "SELECT * FROM sura LIMIT 57, 57";
            $no  = 58;
            foreach ($pdo->query($sql) as $row) :
            ?>
                <tr>
                    <td class="nomor"><?php echo $no; ?></td>
                    <td class="arabic">
                        <a href="?menu=quran-content&sura=<?php echo $row['index'] ?>">
                            <?php echo $row['name_arabic']; ?>
                        </a>
                    </td>
                    <td class="indonesia">
                        <a href="?menu=quran-content&sura=<?php echo $row['index'] ?>">
                            <?php echo $row['name_indonesia']; ?>
                        </a>
                    </td>
                    <td class="jumlah-ayat"><?php echo $row['ayas']; ?></td>
                </tr>
            <?php
                $no++;
            endforeach;
            ?>
            </tbody>
        </table>
    </span>
</div>
-->
